<template>
  <div class="mooc-profile-page">
    <!-- 用户信息头部 -->
    <div class="profile-header">
      <div class="container">
        <div class="header-content">
          <div class="user-avatar">
            <AvatarUpload 
              :model-value="userInfo?.avatarUrl" 
              @update:model-value="handleAvatarUpload"
              :size="120"
            />
            <div class="avatar-overlay">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
              </svg>
            </div>
          </div>
          
          <div class="user-details">
            <h1 class="user-name">{{ userInfo?.nickname || userInfo?.username }}</h1>
            <p class="user-email">{{ userInfo?.email }}</p>
            <div class="user-role">
              <span class="role-badge" :class="getRoleClass(userInfo?.role)">
                {{ getRoleText(userInfo?.role) }}
              </span>
            </div>
          </div>

          <div class="user-stats">
            <div class="stat-card">
              <div class="stat-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                  <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                </svg>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ enrolledCourses.length }}</div>
                <div class="stat-label">已选课程</div>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                  <polyline points="22,4 12,14.01 9,11.01"></polyline>
                </svg>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ completedLessons }}</div>
                <div class="stat-label">完成章节</div>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12,6 12,12 16,14"></polyline>
                </svg>
              </div>
              <div class="stat-content">
                <div class="stat-number">{{ studyHours }}</div>
                <div class="stat-label">学习时长</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="profile-content">
      <div class="container">
        <!-- 导航标签 -->
        <div class="profile-nav">
          <button 
            v-for="tab in tabs" 
            :key="tab.key"
            class="nav-tab"
            :class="{ active: activeTab === tab.key }"
            @click="activeTab = tab.key"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" v-html="tab.icon"></svg>
            {{ tab.label }}
          </button>
        </div>

        <!-- 标签内容 -->
        <div class="tab-content">
          <!-- 我的课程 -->
          <div v-if="activeTab === 'courses'" class="tab-panel">
            <div class="panel-header">
              <h2 class="panel-title">我的课程</h2>
              <button class="add-btn" @click="$router.push('/courses')">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <line x1="12" y1="5" x2="12" y2="19"></line>
                  <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
                浏览更多课程
              </button>
            </div>

            <div v-if="enrolledCourses.length === 0" class="empty-state">
              <div class="empty-icon">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                  <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                </svg>
              </div>
              <h3 class="empty-title">还没有选择课程</h3>
              <p class="empty-subtitle">开始您的编程学习之旅</p>
              <button class="primary-btn" @click="$router.push('/courses')">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <circle cx="11" cy="11" r="8"></circle>
                  <path d="m21 21-4.35-4.35"></path>
                </svg>
                浏览课程
              </button>
            </div>

            <div v-else class="courses-grid">
              <div 
                v-for="course in enrolledCourses" 
                :key="course.id"
                class="course-card"
                @click="goToCourse(course.id)"
              >
                <div class="course-image">
                  <img :src="getActualCoverUrl(course)" :alt="course.title" />
                  <div class="course-progress-overlay">
                    <div class="progress-circle">
                      <svg class="progress-ring" width="48" height="48">
                        <circle
                          class="progress-ring-circle"
                          stroke="rgba(255,255,255,0.3)"
                          stroke-width="3"
                          fill="transparent"
                          r="21"
                          cx="24"
                          cy="24"
                        />
                        <circle
                          class="progress-ring-circle progress-ring-fill"
                          stroke="white"
                          stroke-width="3"
                          fill="transparent"
                          r="21"
                          cx="24"
                          cy="24"
                          :stroke-dasharray="circumference"
                          :stroke-dashoffset="circumference - (getCourseProgress(course.id) / 100) * circumference"
                        />
                      </svg>
                      <span class="progress-text">{{ getCourseProgress(course.id) }}%</span>
                    </div>
                  </div>
                </div>

                <div class="course-content">
                  <h3 class="course-title">{{ course.title }}</h3>
                  <div class="course-meta">
                    <span class="course-category">{{ getCategoryName(course.categoryId) }}</span>
                    <span class="course-difficulty">{{ getDifficultyText(course.difficulty) }}</span>
                  </div>
                  
                  <div class="progress-bar">
                    <div class="progress-fill" :style="{ width: getCourseProgress(course.id) + '%' }"></div>
                  </div>
                  
                  <div class="course-actions">
                    <button class="continue-btn" @click.stop="continueLearning(course)">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                        <polygon points="5,3 19,12 5,21" fill="currentColor"/>
                      </svg>
                      继续学习
                    </button>
                    <button class="action-btn" @click.stop="showCourseMenu(course, $event)">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <circle cx="12" cy="12" r="1"></circle>
                        <circle cx="19" cy="12" r="1"></circle>
                        <circle cx="5" cy="12" r="1"></circle>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 学习进度 -->
          <div v-if="activeTab === 'progress'" class="tab-panel">
            <div class="panel-header">
              <h2 class="panel-title">学习进度</h2>
            </div>

            <div v-if="enrolledCourses.length === 0" class="empty-state">
              <div class="empty-icon">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                  <polyline points="22,4 12,14.01 9,11.01"></polyline>
                </svg>
              </div>
              <h3 class="empty-title">暂无学习进度</h3>
              <p class="empty-subtitle">选择课程后这里将显示您的学习进度</p>
            </div>

            <div v-else class="progress-list">
              <div v-for="course in enrolledCourses" :key="course.id" class="progress-item">
                <div class="progress-header">
                  <div class="course-info">
                    <h3 class="course-name">{{ course.title }}</h3>
                    <span class="course-progress-text">{{ getCourseProgress(course.id) }}% 完成</span>
                  </div>
                  <div class="progress-actions">
                    <button class="action-btn" @click="goToCourse(course.id)">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                        <polyline points="15,3 21,3 21,9"></polyline>
                        <line x1="10" y1="14" x2="21" y2="3"></line>
                      </svg>
                    </button>
                  </div>
                </div>
                
                <div class="progress-bar-large">
                  <div class="progress-fill" :style="{ width: getCourseProgress(course.id) + '%' }"></div>
                </div>

                <!-- 课程章节详情可以展开显示 -->
                <div class="lessons-summary">
                  <div class="summary-stats">
                    <div class="stat">
                      <span class="stat-value">{{ getCompletedLessonsCount(course.id) }}</span>
                      <span class="stat-label">/ {{ getTotalLessonsCount(course.id) }} 章节完成</span>
                    </div>
                    <div class="stat">
                      <span class="stat-value">{{ getStudyTimeForCourse(course.id) }}</span>
                      <span class="stat-label">学习时长</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 个人设置 -->
          <div v-if="activeTab === 'settings'" class="tab-panel">
            <div class="panel-header">
              <h2 class="panel-title">个人设置</h2>
            </div>

            <div class="settings-grid">
              <div class="settings-card">
                <div class="card-header">
                  <div class="card-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                      <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                  </div>
                  <div class="card-title">基本信息</div>
                </div>
                <div class="card-content">
                  <div class="form-group">
                    <label class="form-label">用户名 <span class="readonly-hint">（只读）</span></label>
                    <input 
                      type="text" 
                      class="form-input readonly-input" 
                      v-model="editingInfo.username"
                      :disabled="true"
                      readonly
                    >
                  </div>
                  <div class="form-group">
                    <label class="form-label">昵称</label>
                    <input 
                      type="text" 
                      class="form-input" 
                      v-model="editingInfo.nickname"
                      :disabled="!editMode"
                      placeholder="请输入昵称"
                    >
                  </div>
                  <div class="form-group">
                    <label class="form-label">邮箱 <span class="readonly-hint">（只读）</span></label>
                    <input 
                      type="email" 
                      class="form-input readonly-input" 
                      v-model="editingInfo.email"
                      :disabled="true"
                      readonly
                    >
                  </div>
                  <div class="form-group">
                    <label class="form-label">手机号</label>
                    <input 
                      type="tel" 
                      class="form-input" 
                      v-model="editingInfo.phone"
                      :disabled="!editMode"
                      placeholder="请输入手机号"
                    >
                  </div>
                  <div class="form-group">
                    <label class="form-label">个人简介</label>
                    <textarea 
                      class="form-input" 
                      v-model="editingInfo.bio"
                      :disabled="!editMode"
                      placeholder="请输入个人简介"
                      rows="3"
                    ></textarea>
                  </div>
                  <div class="form-actions">
                    <button v-if="!editMode" class="secondary-btn" @click="startEdit">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                      </svg>
                      编辑
                    </button>
                    <template v-else>
                      <button class="secondary-btn" @click="cancelEdit">取消</button>
                      <button class="primary-btn" @click="saveUserInfo">保存</button>
                    </template>
                  </div>
                </div>
              </div>

              <div class="settings-card">
                <div class="card-header">
                  <div class="card-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                      <circle cx="12" cy="16" r="1"></circle>
                      <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                    </svg>
                  </div>
                  <div class="card-title">安全设置</div>
                </div>
                <div class="card-content">
                  <div class="setting-item">
                    <div class="setting-info">
                      <div class="setting-name">修改密码</div>
                      <div class="setting-desc">定期更新您的密码以保护账户安全</div>
                    </div>
                    <button class="secondary-btn" @click="showChangePassword = true">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
                        <polyline points="10,17 15,12 10,7"></polyline>
                        <line x1="15" y1="12" x2="3" y2="12"></line>
                      </svg>
                      修改
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改密码弹窗 -->
    <div v-if="showChangePassword" class="modal-overlay" @click="showChangePassword = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3 class="modal-title">修改密码</h3>
          <button class="modal-close" @click="showChangePassword = false">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">当前密码</label>
            <input type="password" class="form-input" v-model="passwordForm.currentPassword">
          </div>
          <div class="form-group">
            <label class="form-label">新密码</label>
            <input type="password" class="form-input" v-model="passwordForm.newPassword">
          </div>
          <div class="form-group">
            <label class="form-label">确认新密码</label>
            <input type="password" class="form-input" v-model="passwordForm.confirmPassword">
          </div>
        </div>
        <div class="modal-footer">
          <button class="secondary-btn" @click="showChangePassword = false">取消</button>
          <button class="primary-btn" @click="changePassword">确认修改</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
import AvatarUpload from '@/components/common/AvatarUpload.vue'
import { authApi } from '@/api/auth'
import { courseApi, enrollmentApi } from '@/api/course'

const router = useRouter()
const authStore = useAuthStore()

// 状态
const userInfo = ref<any>(null)
const enrolledCourses = ref<any[]>([])
const activeTab = ref('courses')
const editMode = ref(false)
const showChangePassword = ref(false)

// 表单数据
const editingInfo = reactive({
  username: '',
  nickname: '',
  email: ''
})

const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 标签配置
const tabs = [
  {
    key: 'courses',
    label: '我的课程',
    icon: '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>'
  },
  {
    key: 'progress',
    label: '学习进度',
    icon: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22,4 12,14.01 9,11.01"></polyline>'
  },
  {
    key: 'settings',
    label: '个人设置',
    icon: '<circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>'
  }
]

// 计算属性
const completedLessons = computed(() => {
  // 这里应该从实际的学习进度数据计算
  return 0
})

const studyHours = computed(() => {
  // 这里应该从实际的学习时长数据计算
  return '0h'
})

const circumference = computed(() => 2 * Math.PI * 21)

// 方法
const fetchUserInfo = async () => {
  try {
    console.log('🔄 开始获取用户信息...')
    const response = await authApi.me()
    console.log('👤 获取到的用户信息:', response)
    userInfo.value = response
    Object.assign(editingInfo, response)
    console.log('📝 编辑表单数据已初始化:', editingInfo)
  } catch (error) {
    console.error('❌ 获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败，请刷新重试')
  }
}

const fetchEnrolledCourses = async () => {
  try {
    console.log('🔄 开始获取已选课程...')
    const response = await enrollmentApi.getMyEnrollments()
    console.log('📚 获取到的选课数据:', response)
    
    // 处理不同的响应格式
    let courses = []
    if (Array.isArray(response)) {
      courses = response
    } else if (response?.content) {
      courses = response.content
    } else if (response?.data) {
      courses = Array.isArray(response.data) ? response.data : [response.data]
    } else {
      courses = response || []
    }
    
    console.log('📝 处理后的课程列表:', courses)
    
    // 验证每个课程的ID
    courses.forEach((course, index) => {
      if (!course.id || isNaN(Number(course.id))) {
        console.warn(`⚠️ 课程 ${index} 的ID无效:`, course)
      }
    })
    
    enrolledCourses.value = courses
    console.log('✅ 已选课程加载完成，共', courses.length, '门课程')
  } catch (error) {
    console.error('❌ 获取已选课程失败:', error)
    ElMessage.error('获取课程列表失败，请刷新重试')
  }
}

const handleAvatarUpload = async (avatarUrl: string) => {
  try {
    await authApi.updateProfile({ avatarUrl })
    if (userInfo.value) {
      userInfo.value.avatarUrl = avatarUrl
    }
    ElMessage.success('头像更新成功')
  } catch (error) {
    ElMessage.error('头像更新失败')
  }
}

const getRoleClass = (role?: string) => {
  const roleMap = {
    ADMIN: 'role-admin',
    TEACHER: 'role-teacher',
    STUDENT: 'role-student'
  }
  return roleMap[role as keyof typeof roleMap] || 'role-student'
}

const getRoleText = (role?: string) => {
  const roleMap = {
    ADMIN: '管理员',
    TEACHER: '讲师',
    STUDENT: '学员'
  }
  return roleMap[role as keyof typeof roleMap] || '学员'
}

const getActualCoverUrl = (course: any) => {
  if (course.coverUrl) {
    if (course.coverUrl.startsWith('/uploads/')) {
      return `http://localhost:8080${course.coverUrl}`
    }
    return course.coverUrl
  }
  return 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=240&fit=crop'
}

const getCategoryName = (categoryId?: number) => {
  // 这里应该从分类列表中获取名称
  return '编程开发'
}

const getDifficultyText = (difficulty?: string) => {
  const texts = { 
    BEGINNER: '初级', 
    INTERMEDIATE: '中级', 
    ADVANCED: '高级',
    EASY: '简单',
    MEDIUM: '中等',
    HARD: '困难'
  }
  return texts[difficulty as keyof typeof texts] || '中级'
}

const getCourseProgress = (courseId: number) => {
  // 这里应该从实际的学习进度数据获取
  return Math.floor(Math.random() * 100)
}

const getCompletedLessonsCount = (courseId: number) => {
  return Math.floor(Math.random() * 10)
}

const getTotalLessonsCount = (courseId: number) => {
  return 15
}

const getStudyTimeForCourse = (courseId: number) => {
  return `${Math.floor(Math.random() * 20)}h`
}

const goToCourse = (courseId: number) => {
  console.log('🎯 Profile页面跳转到课程详情, courseId:', courseId, 'type:', typeof courseId)
  
  // 验证courseId是否有效
  if (!courseId || courseId === null || courseId === undefined || isNaN(Number(courseId))) {
    console.error('❌ 无效的课程ID:', courseId)
    ElMessage.error('课程ID无效，请重试')
    return
  }
  
  const courseIdStr = String(courseId)
  console.log('✅ 跳转到课程详情，courseId:', courseIdStr)
  router.push({ name: 'CourseDetail', params: { id: courseIdStr } })
}

const continueLearning = (course: any) => {
  console.log('🎯 Profile页面继续学习, course:', course)
  
  const courseId = course?.id
  if (!courseId || courseId === null || courseId === undefined || isNaN(Number(courseId))) {
    console.error('❌ 无效的课程数据:', course)
    ElMessage.error('课程数据无效，请重试')
    return
  }
  
  const courseIdStr = String(courseId)
  console.log('✅ 继续学习课程，courseId:', courseIdStr)
  router.push({ name: 'CourseDetail', params: { id: courseIdStr } })
}

const showCourseMenu = (course: any, event: Event) => {
  // 这里可以显示课程操作菜单
  console.log('显示课程菜单:', course)
}

const startEdit = () => {
  console.log('✏️ 开始编辑个人信息')
  console.log('📋 当前用户信息:', userInfo.value)
  console.log('📝 当前编辑数据:', editingInfo)
  
  // 确保编辑数据是最新的
  if (userInfo.value) {
    Object.assign(editingInfo, userInfo.value)
    console.log('🔄 已同步编辑数据:', editingInfo)
  }
  
  editMode.value = true
  console.log('✅ 已进入编辑模式')
}

const saveUserInfo = async () => {
  try {
    console.log('💾 开始保存用户信息:', editingInfo)
    
    // 只发送后端支持的字段：nickname, bio, phone, avatarUrl
    const updateData = {
      nickname: editingInfo.nickname,
      bio: editingInfo.bio,
      phone: editingInfo.phone,
      avatarUrl: editingInfo.avatarUrl
    }
    
    console.log('📤 发送给后端的数据:', updateData)
    await authApi.updateProfile(updateData)
    
    // 只更新允许修改的字段到本地用户信息
    Object.assign(userInfo.value, updateData)
    editMode.value = false
    console.log('✅ 用户信息保存成功')
    ElMessage.success('信息更新成功')
  } catch (error) {
    console.error('❌ 用户信息保存失败:', error)
    ElMessage.error('信息更新失败，请重试')
  }
}

const cancelEdit = () => {
  console.log('❌ 取消编辑，恢复原始数据')
  Object.assign(editingInfo, userInfo.value)
  editMode.value = false
  console.log('🔄 已恢复编辑数据:', editingInfo)
}

const changePassword = async () => {
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    ElMessage.error('两次输入的密码不一致')
    return
  }

  try {
    await authApi.changePassword({
      currentPassword: passwordForm.currentPassword,
      newPassword: passwordForm.newPassword
    })
    showChangePassword.value = false
    Object.assign(passwordForm, { currentPassword: '', newPassword: '', confirmPassword: '' })
    ElMessage.success('密码修改成功')
  } catch (error) {
    ElMessage.error('密码修改失败')
  }
}

// 生命周期
onMounted(() => {
  fetchUserInfo()
  fetchEnrolledCourses()
})
</script>

<style scoped>
/* My MOOC风格的个人资料页面 */
.mooc-profile-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 用户信息头部 */
.profile-header {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: white;
  padding: 40px 0;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 30px;
}

.user-avatar {
  position: relative;
  flex-shrink: 0;
}

.avatar-overlay {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  background: #4dc0b5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid white;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 32px;
  font-weight: 400;
  margin: 0 0 8px 0;
}

.user-email {
  font-size: 16px;
  opacity: 0.9;
  margin: 0 0 12px 0;
}

.user-role {
  margin-bottom: 0;
}

.role-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.3);
}

.role-badge.role-admin {
  background: rgba(220, 53, 69, 0.2);
  border-color: rgba(220, 53, 69, 0.3);
}

.role-badge.role-teacher {
  background: rgba(255, 193, 7, 0.2);
  border-color: rgba(255, 193, 7, 0.3);
}

.role-badge.role-student {
  background: rgba(40, 167, 69, 0.2);
  border-color: rgba(40, 167, 69, 0.3);
}

.user-stats {
  display: flex;
  gap: 20px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  min-width: 120px;
  backdrop-filter: blur(10px);
}

.stat-icon {
  margin-bottom: 12px;
  opacity: 0.8;
}

.stat-number {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
}

/* 主要内容区域 */
.profile-content {
  padding: 40px 0;
}

/* 导航标签 */
.profile-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e5e5e5;
  overflow-x: auto;
}

.nav-tab {
  background: none;
  border: none;
  padding: 12px 16px;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}

.nav-tab:hover {
  color: #4A90E2;
}

.nav-tab.active {
  color: #4A90E2;
  border-bottom-color: #4A90E2;
}

/* 标签面板 */
.tab-content {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tab-panel {
  padding: 30px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.panel-title {
  font-size: 24px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

/* 按钮样式 */
.primary-btn, .secondary-btn, .add-btn, .continue-btn, .action-btn {
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  text-decoration: none;
}

.primary-btn {
  background: #4A90E2;
  color: white;
  padding: 10px 20px;
}

.primary-btn:hover {
  background: #357ABD;
}

.secondary-btn {
  background: #f8f9fa;
  color: #333;
  border: 1px solid #ddd;
  padding: 10px 20px;
}

.secondary-btn:hover {
  background: #e9ecef;
}

.add-btn {
  background: #4dc0b5;
  color: white;
  padding: 8px 16px;
}

.add-btn:hover {
  background: #45a69b;
}

.continue-btn {
  background: #4A90E2;
  color: white;
  padding: 8px 16px;
  flex: 1;
}

.continue-btn:hover {
  background: #357ABD;
}

.action-btn {
  background: #f8f9fa;
  color: #666;
  border: 1px solid #ddd;
  padding: 8px;
  width: 32px;
  height: 32px;
  justify-content: center;
}

.action-btn:hover {
  background: #e9ecef;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  color: #999;
  margin-bottom: 20px;
}

.empty-title {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.empty-subtitle {
  color: #666;
  margin-bottom: 30px;
}

/* 课程网格 */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.course-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  cursor: pointer;
  transition: all 0.3s;
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.course-image {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-progress-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
}

.progress-circle {
  position: relative;
  width: 48px;
  height: 48px;
}

.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring-circle {
  transition: stroke-dashoffset 0.3s;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
  color: white;
}

.course-content {
  padding: 16px;
}

.course-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.course-category, .course-difficulty {
  font-size: 12px;
  color: #666;
  background: #f8f9fa;
  padding: 2px 8px;
  border-radius: 12px;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: #e5e5e5;
  border-radius: 2px;
  margin-bottom: 16px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #4A90E2;
  border-radius: 2px;
  transition: width 0.3s;
}

.course-actions {
  display: flex;
  gap: 8px;
}

/* 学习进度 */
.progress-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.progress-item {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 20px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.course-info {
  flex: 1;
}

.course-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.course-progress-text {
  font-size: 14px;
  color: #4A90E2;
  font-weight: 500;
}

.progress-actions {
  display: flex;
  gap: 8px;
}

.progress-bar-large {
  width: 100%;
  height: 8px;
  background: #e5e5e5;
  border-radius: 4px;
  margin-bottom: 16px;
  overflow: hidden;
}

.lessons-summary {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}

.summary-stats {
  display: flex;
  gap: 24px;
}

.stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.stat-value {
  font-weight: 600;
  color: #333;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

/* 设置页面 */
.settings-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.settings-card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  background: #f8f9fa;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-icon {
  color: #4A90E2;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.card-content {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #4A90E2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.form-input:disabled {
  background: #f8f9fa;
  color: #666;
}

.readonly-input {
  background-color: #f8f9fa !important;
  color: #6b7280 !important;
  cursor: not-allowed;
}

.readonly-hint {
  font-size: 12px;
  color: #9ca3af;
  font-weight: normal;
}

textarea.form-input {
  min-height: 80px;
  resize: vertical;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.setting-info {
  flex: 1;
}

.setting-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.setting-desc {
  font-size: 12px;
  color: #666;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
  margin: 20px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.modal-close:hover {
  background: #f8f9fa;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .user-stats {
    justify-content: center;
  }

  .profile-nav {
    gap: 4px;
  }

  .nav-tab {
    padding: 10px 12px;
    font-size: 12px;
  }

  .courses-grid {
    grid-template-columns: 1fr;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .tab-panel {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .user-name {
    font-size: 24px;
  }

  .user-stats {
    flex-direction: column;
    gap: 12px;
  }

  .stat-card {
    min-width: auto;
    padding: 16px;
  }
}
</style>